<script setup lang="ts">
import { onMounted } from 'vue'
import ServiceManager from './components/ServiceManager.vue'
import { useTheme } from './composables/useTheme'

// 初始化主题
const { initTheme, watchSystemTheme } = useTheme()

onMounted(() => {
  initTheme()
  watchSystemTheme()
})
</script>

<template>
  <div id="app">
    <ServiceManager />
  </div>
</template>

<style>
* {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--el-bg-color-page);
  color: var(--el-text-color-primary);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--el-bg-color-page);
  transition: background-color 0.3s;
}

/* 暗色主题特殊样式 */
.theme-dark {
  color-scheme: dark;
}

/* 卡片和容器 */
.theme-dark .el-card {
  background-color: var(--el-bg-color-overlay) !important;
  border-color: var(--el-border-color) !important;
}

.theme-dark .el-card__header {
  background-color: var(--el-fill-color-light) !important;
  color: var(--el-text-color-primary) !important;
  border-bottom-color: var(--el-border-color) !important;
}

.theme-dark .el-card__body {
  background-color: var(--el-bg-color-overlay) !important;
  color: var(--el-text-color-primary) !important;
}

/* 头部样式 */
.theme-dark .el-header {
  background-color: var(--el-bg-color-overlay) !important;
  border-bottom-color: var(--el-border-color) !important;
}

.theme-dark .el-header h1 {
  color: var(--el-text-color-primary) !important;
}

/* 按钮样式优化 */
.theme-dark .el-button {
  background-color: var(--el-fill-color-light) !important;
  border-color: var(--el-border-color) !important;
  color: var(--el-text-color-primary) !important;
}

.theme-dark .el-button:hover {
  background-color: var(--el-fill-color) !important;
  border-color: var(--el-border-color-dark) !important;
  color: var(--el-text-color-primary) !important;
}

.theme-dark .el-button:focus {
  background-color: var(--el-fill-color) !important;
  border-color: var(--el-color-primary) !important;
  color: var(--el-text-color-primary) !important;
}

.theme-dark .el-button--primary {
  background-color: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
  color: #ffffff !important;
}

.theme-dark .el-button--primary:hover {
  background-color: var(--el-color-primary-light-3) !important;
  border-color: var(--el-color-primary-light-3) !important;
  color: #ffffff !important;
}

.theme-dark .el-button--success {
  background-color: var(--el-color-success) !important;
  border-color: var(--el-color-success) !important;
  color: #ffffff !important;
}

.theme-dark .el-button--warning {
  background-color: var(--el-color-warning) !important;
  border-color: var(--el-color-warning) !important;
  color: #ffffff !important;
}

.theme-dark .el-button--danger {
  background-color: var(--el-color-danger) !important;
  border-color: var(--el-color-danger) !important;
  color: #ffffff !important;
}

/* 表格样式 */
.theme-dark .el-table {
  background-color: var(--el-bg-color-overlay) !important;
  color: var(--el-text-color-primary) !important;
}

.theme-dark .el-table th.el-table__cell {
  background-color: var(--el-fill-color-light) !important;
  color: var(--el-text-color-primary) !important;
  border-bottom-color: var(--el-border-color) !important;
}

.theme-dark .el-table td.el-table__cell {
  border-bottom-color: var(--el-border-color-lighter) !important;
  color: var(--el-text-color-primary) !important;
}

.theme-dark .el-table tr {
  background-color: var(--el-bg-color-overlay) !important;
}

.theme-dark .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: var(--el-fill-color-lighter) !important;
}

.theme-dark .el-table .el-table__row:hover {
  background-color: var(--el-fill-color-light) !important;
}

/* 对话框样式 */
.theme-dark .el-dialog {
  background-color: var(--el-bg-color-overlay) !important;
  border: 1px solid var(--el-border-color) !important;
}

.theme-dark .el-dialog__header {
  background-color: var(--el-fill-color-light) !important;
  color: var(--el-text-color-primary) !important;
  border-bottom-color: var(--el-border-color) !important;
}

.theme-dark .el-dialog__title {
  color: var(--el-text-color-primary) !important;
}

.theme-dark .el-dialog__body {
  background-color: var(--el-bg-color-overlay) !important;
  color: var(--el-text-color-primary) !important;
}

/* 表单样式 */
.theme-dark .el-form-item__label {
  color: var(--el-text-color-regular) !important;
}

.theme-dark .el-input__wrapper {
  background-color: var(--el-fill-color-light) !important;
  border-color: var(--el-border-color) !important;
}

.theme-dark .el-input__inner {
  background-color: transparent !important;
  color: var(--el-text-color-primary) !important;
}

.theme-dark .el-input__inner::placeholder {
  color: var(--el-text-color-placeholder) !important;
}

.theme-dark .el-textarea__inner {
  background-color: var(--el-fill-color-light) !important;
  border-color: var(--el-border-color) !important;
  color: var(--el-text-color-primary) !important;
}

/* 标签页样式 */
.theme-dark .el-tabs__item {
  color: var(--el-text-color-secondary) !important;
}

.theme-dark .el-tabs__item.is-active {
  color: var(--el-color-primary) !important;
}

.theme-dark .el-tabs__item:hover {
  color: var(--el-text-color-primary) !important;
}

.theme-dark .el-tabs__nav-wrap::after {
  background-color: var(--el-border-color) !important;
}

.theme-dark .el-tabs__active-bar {
  background-color: var(--el-color-primary) !important;
}

/* 图标和徽章 */
.theme-dark .el-tag {
  background-color: var(--el-fill-color-light) !important;
  border-color: var(--el-border-color) !important;
  color: var(--el-text-color-primary) !important;
}

.theme-dark .el-tag--success {
  background-color: rgba(103, 194, 58, 0.1) !important;
  border-color: var(--el-color-success) !important;
  color: var(--el-color-success) !important;
}

.theme-dark .el-tag--warning {
  background-color: rgba(230, 162, 60, 0.1) !important;
  border-color: var(--el-color-warning) !important;
  color: var(--el-color-warning) !important;
}

.theme-dark .el-tag--danger {
  background-color: rgba(245, 108, 108, 0.1) !important;
  border-color: var(--el-color-danger) !important;
  color: var(--el-color-danger) !important;
}

.theme-dark .el-tag--info {
  background-color: rgba(144, 147, 153, 0.1) !important;
  border-color: var(--el-color-info) !important;
  color: var(--el-color-info) !important;
}

/* 开关和滑块 */
.theme-dark .el-switch__core {
  background-color: var(--el-fill-color-dark) !important;
  border-color: var(--el-border-color) !important;
}

.theme-dark .el-switch.is-checked .el-switch__core {
  background-color: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
}

/* 数字输入框 */
.theme-dark .el-input-number {
  background-color: var(--el-fill-color-light) !important;
}

.theme-dark .el-input-number .el-input__wrapper {
  background-color: var(--el-fill-color-light) !important;
}

/* 提示信息 */
.theme-dark .el-alert {
  background-color: var(--el-fill-color-light) !important;
  border-color: var(--el-border-color) !important;
}

.theme-dark .el-alert--info {
  background-color: rgba(64, 158, 255, 0.1) !important;
  border-color: var(--el-color-primary) !important;
}

.theme-dark .el-alert__title {
  color: var(--el-text-color-primary) !important;
}

.theme-dark .el-alert__description {
  color: var(--el-text-color-regular) !important;
}

/* 空状态 */
.theme-dark .el-empty__description {
  color: var(--el-text-color-secondary) !important;
}

/* 滚动条样式 */
.theme-dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.theme-dark ::-webkit-scrollbar-track {
  background: var(--el-fill-color-lighter);
}

.theme-dark ::-webkit-scrollbar-thumb {
  background: var(--el-fill-color-dark);
  border-radius: 4px;
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: var(--el-fill-color-darker);
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
